<template>
  <div class="w-full h-full overflow-hidden" v-loading="loading">
    <el-scrollbar always class="h-full w-full overflow-hidden">
      <section>
        <ul class="text-[14px]">
          <li class="h-[46px] flex items-center px-[15px] border-bottom">
            <div>打盘密码</div>
            <div class="flex-1 w-0 ml-[10px] flex items-center">
              <el-input
                type="password"
                readonly
                :value="config.FdPwd"
                placeholder="打盘密码"
                show-password
              ></el-input>
              <el-button class="ml-[10px]" type="primary" @click="handleCopy(config.FdPwd)"
                >复制</el-button
              >
            </div>
          </li>
          <li class="h-[46px] flex items-center px-[15px] border-bottom">
            <div>今日打盘总量</div>
            <div class="ml-[10px]">{{ config.ToDayTotalCount || 0 }}</div>
          </li>
          <li class="h-[46px] flex items-center px-[15px] border-bottom">
            <div>今日打盘总额</div>
            <div class="ml-[10px]">{{ config.ToDayTotalCoin || 0 }}</div>
          </li>
          <li class="h-[46px] flex items-center px-[15px] border-bottom">
            <div class="flex-1">
              <span>打盘成功</span>
              <span class="text-green ml-[5px]">{{ config.SuccessCount || 0 }}</span>
            </div>
            <div class="flex-1">
              <span>打盘失败</span>
              <span class="text-red ml-[5px]">{{ config.FailedCount || 0 }}</span>
            </div>
          </li>
          <li class="h-[46px] flex items-center px-[15px] border-bottom">
            <div>
              <el-radio-group v-model="config.Type" @change="updateData">
                <el-radio :value="1" size="large">实时飞</el-radio>
                <el-radio :value="0" size="large">距离封盘</el-radio>
              </el-radio-group>
            </div>
            <div class="ml-[5px]">
              <el-input-number
                class="!w-[40px] input-number"
                size="small"
                :min="0"
                :controls="false"
                v-model="config.Second"
                @change="updateData"
              />
              <span class="ml-[2px]">秒飞</span>
            </div>
          </li>
          <li class="text-[#ff0000] text-[12px] px-[15px] py-[10px]">
            备注：请将打盘密码填写在打盘助手同步设置中，用于同步游戏状态和获取订单。
          </li>
        </ul>
      </section>
      <section class="border-top !border-[##efefef] !border-t-[10px] text-[13px] text-[#333]">
        <article class="bg-[#f8f8f8] h-[40px] border-bottom flex items-center justify-center">
          游戏开关设置
        </article>
        <ul class="h-[40px] text-center flex items-center border-bottom">
          <li class="w-[60px]">开关</li>
          <li class="w-[90px]">游戏</li>
          <li class="flex-1">期号</li>
          <li class="w-[100px]">盘口倒计时</li>
        </ul>
        <div>
          <ul v-for="item in list" class="h-[40px] text-center flex items-center border-bottom">
            <li class="w-[60px]">
              <el-switch
                v-model="item.Status"
                :active-value="1"
                :inactive-value="0"
                :before-change="() => beforeChange(item)"
              />
            </li>
            <li class="w-[90px]">{{ item.Name }}</li>
            <li class="flex-1">{{ item.CurrentBitchNo }}</li>
            <li class="w-[100px] flex justify-center items-center">
              <template v-if="item.Status == 1">
                <open-time
                  @update="() => getData()"
                  :CloseTime="item.CloseTime"
                  :NextTime="item.NextTime"
                  direction="col"
                />
              </template>
              <template v-else>
                <span class="mr-[5px] text-[#666] block leading-none text-[14px]">--:--</span>
              </template>
            </li>
          </ul>
        </div>
      </section>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { reqDapanConfig, reqDapanConfigEdit } from "@/api/flyalone";
import { handleCopy } from "@/hooks/useUtils";
import { message } from "@/utils/message";
import { cloneDeep } from "lodash-es";

const loading = ref(false);

const config = ref<DapanConfig["Config"]>({
  Id: 0,
  RoomId: 0,
  FdPwd: "",
  ToDayTotalCount: 0,
  ToDayTotalCoin: 0,
  SuccessCount: 0,
  FailedCount: 0,
  Game: "",
  Type: 0,
  Second: 50
});
const emit = defineEmits(["init"]);
const list = ref<DapanConfig["GameList"]>([]);

const getData = async () => {
  try {
    loading.value = true;
    const res = await reqDapanConfig();
    config.value = cloneDeep(res.data.Config);
    list.value = cloneDeep(res.data.GameList || []);
    loading.value = false;
    emit("init", list.value);
  } catch (error) {
    loading.value = false;
    console.log(error);
  }
};

const updateData = async (flag?: boolean) => {
  try {
    const GameList = list.value
      .filter(item => item.Status == 1)
      .map(item => `{${item.LotteryId}}`)
      .join("");
    await reqDapanConfigEdit({
      Id: Number(config.value.Id),
      Type: Number(config.value.Type),
      Game: GameList,
      Second: Number(config.value.Second)
    });
    await getData();
    message.success(flag ? "修改游戏状态成功" : "修改成功");
  } catch (error) {
    console.log(error);
  }
};

const beforeChange = async (item: DapanConfig["GameList"][0]) => {
  return new Promise((resolve, reject) => {
    try {
      item.Status = item.Status == 1 ? 0 : 1;
      nextTick(() => {
        updateData(true);
      });
      return resolve(true);
    } catch (error) {
      return reject(error);
    }
  });
};

onMounted(() => {
  getData();
});
</script>
<style scoped lang="scss">
.input-number {
  height: 30px;
  :deep() {
    .el-input__wrapper {
      padding: 0;
    }
  }
}
</style>
